<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
</head>
<style>
  .HolyGrail {
    display: flex;
    min-height: 30vh;
    flex-direction: column;
  }

  header,
  footer {
    flex: 1;
    height:100px;
    text-align: center;
    background: rgba(29, 27, 27, 0.726);
  }

  .HolyGrail-body {
    display: flex;
    flex: 1;
  }

  .HolyGrail-content {
    flex: 1;
    background-color: greenyellow;
  }

  .HolyGrail-nav, .HolyGrail-ads {
    /* 两个边栏的宽度设为12em */
    /* flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况 则 flex 的默认值是 0 1 auto*/
    /* flex-basis 设置选中元素宽度*/
    flex: 0 0 12em;
    background-color: yellow;
  }

  .HolyGrail-nav {
    /* 导航放到最左边  order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
    order: -1;
    background-color: pink;
  }
</style>
<body class="HolyGrail">
  <h3>圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。
    其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。</h3>
  <header>#header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">#center</main>
    <nav class="HolyGrail-nav">#left</nav>
    <aside class="HolyGrail-ads">#right</aside>
  </div>
  <footer>#footer</footer>

</body>
</html>